import { cn } from "@/common/cn";

const STATUS = {
  neutral: "radio-neutral",
  primary: "radio-primary",
  secondary: "radio-secondary",
  accent: "radio-accent",
  success: "radio-success",
  warning: "radio-warning",
  info: "radio-info",
  error: "radio-error",
};

export type RadioStatus = keyof typeof STATUS;

const SIZES = {
  xs: "radio-xs",
  sm: "radio-sm",
  md: "radio-md",
  lg: "radio-lg",
  xl: "radio-xl",
};

export type RadioProps = Omit<
  React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,
  "size" | "onChange"
> & {
  status?: RadioStatus | undefined;
  size?: Size | undefined;
  onChange?: (value: boolean | undefined) => void;
};

export default function Radio({ status, size, checked, className, onChange, ...p }: RadioProps) {
  return (
    <input
      type="radio"
      checked={checked}
      className={cn("radio", status && STATUS[status], size && SIZES[size], className)}
      onClick={() => onChange?.(!checked)}
      {...p}
    />
  );
}
